/**
 * Created by Hxr on 2018/03/12.
 */
import React, { Component } from 'react';
import {
    View,
    Text,
    ScrollView,
    StyleSheet
} from 'react-native';
import {Row} from 'iftide'

class Row_View extends Component {
    constructor(props){
        super(props)
    }
    render(){
        const {style} = this.props;
        return (
            <View style={[styles.RowViewContainer,style]}>
                <Text></Text>
            </View>
        )
    }
}

export default class Basic extends Component {
    constructor(props){
        super(props)
    }
    render() {
        return (
            <ScrollView style={{flex:1}}>
                <Text>行布局样式一：无间隔</Text>
                <Row size={'none'} direction={'vertical'}>
                    <Row_View/>
                    <Row_View/>
                </Row>
                <Text>行布局样式二：小 5px</Text>
                <Row size={'XS'} direction={'vertical'}>
                    <Row_View/>
                    <Row_View/>
                </Row>
                <Text>行布局样式二：中 10px</Text>
                <Row size={'S'} direction={'vertical'}>
                    <Row_View/>
                    <Row_View/>
                </Row>
                <Text>行布局样式二：中 15px</Text>
                <Row size={'M'} direction={'vertical'}>
                    <Row_View/>
                    <Row_View/>
                </Row>
                <Text>行布局样式二：大 20px</Text>
                <Row size={'L'} direction={'vertical'}>
                    <Row_View/>
                    <Row_View/>
                </Row>
                <Text>行布局样式二：大 30px</Text>
                <Row size={'XL'} direction={'vertical'}>
                    <Row_View/>
                    <Row_View/>
                </Row>
                <Text>行布局样式二：大 40px</Text>
                <Row size={'XXL'} direction={'vertical'}>
                    <Row_View/>
                    <Row_View/>
                </Row>
                <Text>水平方向：无间隔</Text>
                <Row size={'none'} direction={'horizontal'} style={{flexDirection:'row'}}>
                    <Row_View style={{flex:1}}/>
                    <Row_View style={{flex:1}}/>
                </Row>
                <Text>水平方向：小 5px</Text>
                <Row size={'S'} direction={'horizontal'} style={{flexDirection:'row'}} >
                    <Row_View style={{flex:1}}/>
                    <Row_View style={{flex:1}}/>
                </Row>
                <Text>水平方向：中 10px</Text>
                <Row size={'M'} direction={'horizontal'} style={{flexDirection:'row'}}>
                    <Row_View style={{flex:1}}/>
                    <Row_View style={{flex:1}}/>
                </Row>
                <Text>水平方向：中 20px</Text>
                <Row size={'L'} direction={'horizontal'} style={{flexDirection:'row'}}>
                    <Row_View style={{flex:1}}/>
                    <Row_View style={{flex:1}}/>
                </Row>
            </ScrollView>
        )
    }
}

const styles = StyleSheet.create({
    RowViewContainer:{
        backgroundColor:'#d8d8d8',
        height:50
    }
})